<template>
    <view class="content">
        <view class="cont bg-white">
            <div class="top"></div>
            <view class="title">
                <image src="../../static/icon/wx-icon.png" class="wx_logo"></image>
            </view>
            <view class="denglu">
                <view>为了完整体验本平台，了解更多活动，小程序需要您的授权（授权仅用于用户识别）</view>
            </view>
            <button class="btn" @click="getUserInfo">微信用户一键登录</button>
            <button class="btn1"  @click="backClick()">取消登录</button>
        </view>
        
        <!-- <view v-if="showPrivacy">
          <view>隐私弹窗内容....</view>
          <button bindtap="handleOpenPrivacyContract">查看隐私协议</button>
          <button id="agree-btn" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
        </view> -->
        
        <!--  绑定手机  -->
        <u-popup v-model="show" mode="center" border-radius="12" :mask-close-able="false">
        	<view class="padding-lr-xl padding-bottom-xl padding-top-lg" style="width: 80vw;">
        		<view class="flex align-center flex-direction padding-lr-lg">
        			<image src="../../static/icon/wx-icon.png" class="wx_logo" style="border-radius: inherit;"></image>
        			<view class="margin-top-sm text-gray text-sm">请继续绑定手机号码</view>
        		</view>
        		<view class="padding-top">
        			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
        				class="btn text-white text-center text-df bg-green">绑定手机号码</button>
        		</view>
        	</view>
        </u-popup>
        
        <!-- 隐私协议弹窗 -->
        <u-mask :show="privacyShow" @click="privacyShow = false" :zoom="false">
            <view class="privacy-pop">
                <view class="privacy-pop-box" @tap.stop>
                    <view class="privacy-title">隐私协议</view>
                    <scroll-view scroll-y="true" style="height: 40vh;">
                        <view class="privacy-txt">
                            <u-parse :html="content"></u-parse>
                        </view>
                    </scroll-view>
                    <view class="no-agree u-flex u-row-center" @click="privacyShow = false">
                        不同意
                        <u-icon name="arrow-right" color="#adadad" size="28"></u-icon>
                    </view>
                    <view class="agree" @click="agree"><view>同意并继续</view></view>
                </view>
            </view>
        </u-mask>
        
        <!-- 协议 -->
        <view class="form-agreement u-flex u-col-top" @click="act = !act">
            <view class="frame" :class="act ? 'active' : ''" >
                <u-icon name="checkbox-mark" color="#f0b31c" size="34"></u-icon>
            </view>
            <view class="font24">
                我已阅读并同意
                <text @click.stop="privacyShow = true">《用户隐私协议》</text>
                。若您的手机号未注册，将为您直接注册小程序账号
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                showPrivacy: false,
                //选框
                act: false,
                // 协议弹窗
                privacyShow: false,
                
                datas: {},
                isShow: false,
                show: false, // 绑定手机
                userToken: '', // token
                session_key: '',
                info: {},
                code: '',
                mobile: false,
                content: '',
            };
        },
        onLoad(option) {
            if (option.show) {
                this.show = true;
            }
            this.getData()
            
            wx.getPrivacySetting({
                success: res => {
                    console.log(res) // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
                    if (res.needAuthorization) {
                      // 需要弹出隐私协议
                      // this.setData({
                      //   showPrivacy: true
                      // })
                      // this.showPrivacy = true
                    } else {
                      // 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用已声明过的隐私接口
                      // wx.getUserProfile()
                      // wx.chooseMedia()
                      // wx.getClipboardData()
                      // wx.startRecord()
                    }
                },
                fail: (err) => {console.log(err)},
            })
        },
        onShow() {
            const _this = this;
            uni.login({
            	provider: 'weixin',
            	success: res => {
                    console.log(res)
            		_this.code = res.code
            	},
            	fail(err) {
            		console.log('登录失败' + JSON.stringify(err))
            	}
            })
        },
        methods: {
            // handleAgreePrivacyAuthorization() {
            //     // 用户同意隐私协议事件回调
            //     // 用户点击了同意，之后所有已声明过的隐私接口和组件都可以调用了
            //     // wx.getUserProfile()
            //     // wx.chooseMedia()
            //     // wx.getClipboardData()
            //     // wx.startRecord()
            // },
            
            // handleOpenPrivacyContract() {
            //     // 打开隐私协议页面
            //     wx.openPrivacyContract({
            //         success: (res) => {
            //             console.log('wx.openPrivacyContract',res)
            //         }, // 打开成功
            //         fail: (err) => {},
            //     })
            // },
              
            // 获取隐私协议
            getData() {
            	this.$ajax('get_privacy', {
                    franchisee_id: this.$getSync('franchiseeId'),//加盟商编号
            	}).then(ret => {
            		if (ret.status == 0) {
            			this.content = ret.data;
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
            
            // 同意并继续
            agree() {
                this.act = true
                this.privacyShow = false
            },
            
        	// 获取用户微信信息
        	getUserInfo() {
                if (this.act == false) {
                    this.$toast('请先同意用户隐私协议！');
                    return
                }
                const _this = this;
        		// 同意授权
        		uni.getUserProfile({
        			desc: '登录用于展示您的用户信息',
        			success: function(infoRes) {
        				_this.$ajax('login', {
        					encryptedData: infoRes.encryptedData,
        					iv: infoRes.iv,
        					code: _this.code,
                            parent_id: _this.$getSync('parentID') || '',
                            franchisee_id: _this.$getSync('franchiseeId'),//加盟商编号，每个小程序单独设置，第一个小程序设置为1
        				}).then(ret => {
        					if (ret.status == 0) {
                                uni.setStorageSync('userToken', ret.data.userToken);
                                uni.setStorageSync('userId', ret.data.membersInfo.userInfo.id);
                                _this.changeStore()
                                if (ret.data.membersInfo.userInfo.mobile){
                                	uni.showModal({
                                		title: '提示',
                                		content: '登录成功',
                                		showCancel: false,
                                		confirmColor:'#b00b0e',
                                		success: function(res) {
                                			uni.navigateBack({
                                				delta: 1
                                			})
                                		}
                                	});
                                } else {
                                	_this.show = true;
                                }
        					} else {
        						_this.$toast(ret.message);
        					}
        				})
        			}
        		})
        	},
        	// 绑定手机号
        	getPhoneNumber(data) {
                console.log('data',data)
        		const _this = this;
                _this.$ajax('mobile', {
                    code: data.detail.code,
                    franchisee_id: _this.$getSync('franchiseeId'),//加盟商编号
                	encryptedData: data.detail.encryptedData,
                	iv: data.detail.iv,
                	userToken: _this.$getSync('userToken'),
                }).then(ret => {
                	_this.show = false;
                	if (ret.status == 0) {
                		_this.show = false;
                		uni.showModal({
                			title: '提示',
                			content: '登录成功',
                			showCancel: false,
                			confirmColor:'#b00b0e',
                			success: function(res) {
                				uni.navigateBack({
                					delta: 1
                				})
                			}
                		});
                	} else {
                		_this.$toast(ret.message);
                	}
                })
        	},
            // 切换商户
            changeStore() {
                this.$ajax('change', {
                	userToken: this.$getSync('userToken'),
                    store_id: this.$getSync('storeId'),//切换商户编号
                }).then(ret => {
                	if (ret.status == 0) {
                        
                	} else {
                		// this.$toast(ret.message);
                	}
                });
            },
        	backClick() {
        		uni.removeStorageSync('userToken')
                uni.removeStorageSync('userId')
        		uni.navigateBack({
        			delta: 1
        		})
        	},
        }
    };
</script>

<style>
    page{
        background: #fff;
    }
</style>

<style lang="scss" scoped>
.content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
}

.cont {
    padding: 0 80upx;
}

.top {
    height: 40upx;
}

.logo {
    width: 180rpx;
    height: 180rpx;
    display: block;
    margin: 0 auto;
    border-radius: 15rpx;
}

.yhdl {
    margin-bottom: 24rpx !important;
}

.zhmm {
    font-size: 24rpx;
    color: #333;
    text-align: center;
    margin-bottom: 270rpx;
}

.denglu {
    padding: 40rpx 0 120rpx;
    font-size: 24rpx;
    color: #333;
    text-align: center;
}

.title {
    padding-top: 60upx;
    text-align: center;
}

.wx_logo {
    width: 157rpx;
    height: 130rpx;
    margin: 0 auto;
}


.btn,
.btn1 {
    color: #fff;
    margin-bottom: 20rpx;
    border-radius: 0px;
    height: 92rpx;
    line-height: 92rpx;
    font-size: 30rpx;
    border-radius: 92rpx;
}

.btn::after,
.btn1::after {
    border: none;
}

.btn {
    background: #b00b0e !important;
}

.btn1 {
    background: #f5f5f5;
    color: #000;
}

.form-agreement {
    padding: 0 30rpx 30rpx;
    margin-bottom: 400rpx;

    .frame {
        width: 24rpx;
        height: 24rpx;
        border: 1rpx solid #cdcdcd;
        position: relative;
        margin-right: 12rpx;
        margin-top: 4rpx;

        /deep/ u-icon {
            transform: scale(0);
            position: absolute;
            top: -55%;
            left: -20%;
        }
    }

    .active {
        /deep/ u-icon {
            transform: scale(1);
        }
    }

    .font24 {
        flex: 1;
        font-size: 24rpx;
        color: #7c7c7c;
    }

    text {
        color: #f0b31c;
    }
}

// 弹出层
.privacy-pop {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .privacy-pop-box {
        width: 580rpx;
        border-radius: 20rpx;
        background: white;
        padding: 0px 0rpx;
        position: relative;
        .privacy-icon {
            position: absolute;
            left: 50%;
            top: -55rpx;
            height: 110rpx;
            width: 160rpx;
            transform: translateX(-50%);
        }
        .privacy-title {
            font-size: 34rpx;
            font-weight: bold;
            text-align: center;
            padding: 50rpx 30rpx 30rpx;
        }
        .privacy-txt {
            padding: 0px 30rpx;
            font-size: 24rpx;
        }
        .no-agree {
            font-size: 26rpx;
            line-height: 26rpx;
            color: #717171;
            padding: 30rpx 0rpx;
        }
        .agree {
            padding: 10rpx 100rpx 60rpx;
            view {
                background: #f0b31c;
                height: 80rpx;
                border-radius: 80rpx;
                line-height: 80rpx;
                text-align: center;
                color: white;
                font-size: 32rpx;
            }
        }
    }
}
</style>
